import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { HttpRequest } from "../../../service/httpRequest";

declare var $:any;

const xAxis = {
  years: {categories: ['2016', '2017', '2018', '2019', '2020'], crosshair: true},
  months: {categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], crosshair: true},
  days: {categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'], crosshair: true},
  hours: {categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'], crosshair: true}
};
@Component({
  selector: 'chart-tempreture',
  template: `
 <div id="groupstat_temp" style="height:400px;width: 100%; margin: 0 auto"></div>
  `
})
export class TempretureComponent implements OnInit {
  @Input() public groupId:string;
  @Input() public date:any;
  option;
  private params:any;
  constructor(private httpRequest:HttpRequest) { }

  ngOnInit() {
    this.paintTempreture();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if(changes.date.currentValue == undefined) return;
    this.params.date_str = changes.date.currentValue.time;
    this.params.unit = changes.date.currentValue.type;
    this.getData();
  }

  getData(){
    let  series;
    switch(this.params.unit){
      case 'year':
        this.params.unit='years';
        break;
      case 'month':
        this.params.unit='months';
        break;
      case 'day':
        this.params.unit='days';
        break;
      case 'hour':
        this.params.unit='hours';
        break;
    }
    if(this.params.unit == 'years') {

      series =  [{
        name: '设备1',
        data: [49.9, 71.5, 106.4, 129.2, 144.0]

      }, {
        name: '设备2',
        data: [83.6, 78.8, 98.5, 93.4, 106.0]

      }, {
        name: '设备3',
        data: [48.9, 38.8, 39.3, 41.4, 47.0]

      }, {
        name: '设备4',
        data: [42.4, 33.2, 34.5, 39.7, 52.6]

      }];
      this.groupstat_temp(xAxis[this.params.unit],series);
    }
    else{
      this.httpRequest.sendGet('stat/qztj',this.params).subscribe(res => {
        this.groupstat_temp(xAxis[this.params.unit],res);
      },err => console.log(err));
    }
  }

  paintTempreture(){
    let date = new Date();
    let ofday = date.getDate();
    let ofmonth = date.getMonth()+1;
    let ofyear = date.getFullYear();
    let time = ofyear + '-' + ofmonth  + '-' + ofday;
    this.params = {
      date_str:time,
      attr: 'Exhausttemp',
      aggregator: 'avg',
      unit: 'hour',
      qunzu_id: this.groupId
    };

    this.getData();
  }


  groupstat_temp(xAxis,series){
    $('#groupstat_temp').highcharts({
      chart: {
        type: 'column'
      },
      title: {
        text: '各设备排气温度统计'
      },

      xAxis: xAxis,
      yAxis: {
        min: 0,
        title: {
          text: '排气温度值 (℃)'
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} ℃</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0
        }
      },
      series: series
    });
  }
}
